<template>
	<view style="display: flex; flex-direction: row;">
		<view class="cell">
			
			<view class="cell-h" v-for="(playerHs, i) in players" :key="i">
				<view class="cell-item" v-for="(player, j) in playerHs" :key="i + '-' + j">
					<cell-item :player="player" :redLev="redLev" :showRed="player.cloud ? false : true"/>
				</view>
				
			</view>
			
		</view>
	</view>
</template>

<script>
	
	import cellItem from '@/components/cell-item/cell-item.vue'
	
	export default {
		name:"cell",
		components: {
			cellItem
		},
		props: {
			players: {
				type: Array,
				default: []
			},
			redLev: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				borderl: [
					'top-line right-line bottom-line left-line',
					'top-line right-line bottom-line',
					'right-line bottom-line left-line',
					'right-line bottom-line'
				]
			};
		}
	}
</script>

<style scoped>
	
	.cell {
		display: flex;
		/* border: 1px black solid;
		border-right: 0; */
	}
	
	.cell-h {
		width: 82px;
		margin-right: 1px;
	}
	
	.current-player {
		display: flex;
		flex-wrap: wrap;
	}
	
	.cell-item {
		border: 1px black solid;
		box-sizing: border-box;
		margin-bottom: 1px;
	}
	
	.v-line {
		width: 1px;
		height: 100%;
		background-color: red;
	}

</style>